<!doctype html>
<!--[if IE 7 ]>		 <html class="no-js ie ie7 lte7 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 8 ]>		 <html class="no-js ie ie8 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 9 ]>		 <html class="no-js ie ie9 lte9" lang="zh"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="zh"> <!--<![endif]-->
<head data-live-domain="api.jquery.com">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>.css() | jQuery API Documentation</title>

  <meta name="author" content="JS Foundation - js.foundation">
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width">

  <link rel="shortcut icon" href="//api.jquery.com/jquery-wp-content/themes/api.jquery.com/i/favicon.ico">

  <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=3">
  <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/api.jquery.com/style.css">

  <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>

  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

  <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/plugins.js"></script>
  <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/main.js"></script>

  <script src="https://use.typekit.net/wde1aof.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>
  <!-- at the end of the HEAD -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
  <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/jquery/css/docsearch.css">

  <link rel='https://api.w.org/' href='//api.jquery.com/wp-json/' />
  <meta name="generator" content="WordPress 4.5.2" />
  <link rel="alternate" type="application/json+oembed" href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fcss%2F" />
  <link rel="alternate" type="text/xml+oembed" href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fcss%2F&#038;format=xml" />

</head>
<body class="api jquery single single-post postid-109 single-format-standard single-author singular">

<header>
  <section id="global-nav">
    <nav>
      <div class="constrain">
        <ul class="projects">
          <li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li>
          <li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
          <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li>
          <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
          <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
        </ul>
        <ul class="links">
          <li><a href="https://plugins.jquery.com/">Plugins</a></li>
          <li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a>
            <ul>
              <li><a href="https://js.foundation/CLA">CLA</a></li>
              <li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li>
              <li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li>
              <li><a href="https://contribute.jquery.org/code/">Code</a></li>
              <li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li>
              <li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li>
            </ul>
          </li>
          <li class="dropdown"><a href="https://js.foundation/events">Events</a>
            <ul class="wide">
            </ul>
          </li>
          <li class="dropdown"><a href="https://jquery.org/support/">Support</a>
            <ul>
              <li><a href="https://learn.jquery.com/">Learning Center</a></li>
              <li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
              <li><a href="https://forum.jquery.com/">Forums</a></li>
              <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
              <li><a href="https://jquery.org/support/">Commercial Support</a></li>
            </ul>
          </li>
          <li class="dropdown"><a href="https://js.foundation/">JS Foundation</a>
            <ul>
              <li><a href="https://js.foundation/about/join">Join</a></li>
              <li><a href="https://js.foundation/about/members">Members</a></li>
              <li><a href="https://js.foundation/about/leadership">Leadership</a></li>
              <li><a href="https://js.foundation/community/code-of-conduct">Conduct</a></li>
              <li><a href="https://js.foundation/about/donate">Donate</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </section>
</header>

<div id="container">
  <div id="logo-events" class="constrain clearfix">
    <h2 class="logo"><a href="https://jquery.com/" title="jQuery API Documentation">jQuery API Documentation</a></h2>

    <aside>
      <div id="broadcast">
        <a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img src="/jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation" alt="Support the JS Foundation" border="0" width="400" height="100"></a>
      </div>
    </aside>
  </div>

  <nav id="main" class="constrain clearfix">
    <div class="menu-top-container">
      <ul id="menu-top" class="menu">
        <li class="menu-item"><a href="https://jquery.com/download/">Download</a></li>
        <li class="menu-item current"><a href="https://api.jquery.com/">API Documentation</a></li>
        <li class="menu-item"><a href="https://blog.jquery.com/">Blog</a></li>
        <li class="menu-item"><a href="https://plugins.jquery.com/">Plugins</a></li>
        <li class="menu-item"><a href="https://jquery.com/browser-support/">Browser Support</a></li>
      </ul>
    </div>

    <form method="get" class="searchform" action="//api.jquery.com/">
      <button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
      <label>
        <span class="visuallyhidden">Search jQuery API Documentation</span>
        <input type="text" name="s" value=""
               placeholder="Search">
      </label>
    </form>
  </nav>

  <div id="content-wrapper" class="clearfix row">

    <div class="content-right twelve columns">
      <div id="content">

        <article id="post-109" class="post-109 post type-post status-publish format-standard hentry category-css category-style-properties category-65 category-75 category-86 category-104">
          <header class="entry-header">
            <h1 class="entry-title">.css()</h1>
            <hr>
            <div class="entry-meta">
              Categories: <span class="category"><a href="//api.jquery.com/category/css/">CSS</a></span><span class="category-divider"> | </span><span class="category"><a href="//api.jquery.com/category/manipulation/">Manipulation</a> &gt; <a href="//api.jquery.com/category/manipulation/style-properties/">Style Properties</a></span>		</div><!-- .entry-meta -->
          </header><!-- .entry-header -->

          <div class="entry-content">
            Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.<div class="toc">
            <h4><span>Contents:</span></h4>
            <ul class="toc-list">
              <li>
                <a href="#css1">.css( propertyName )</a><ul>
                <li><a href="#css-propertyName">.css( propertyName )</a></li>
                <li><a href="#css-propertyNames">.css( propertyNames )</a></li>
              </ul>
              </li>
              <li>
                <a href="#css2">.css( propertyName, value )</a><ul>
                <li><a href="#css-propertyName-value">.css( propertyName, value )</a></li>
                <li><a href="#css-propertyName-function">.css( propertyName, function )</a></li>
                <li><a href="#css-properties">.css( properties )</a></li>
              </ul>
              </li>
            </ul>
          </div><article id="css1" class="entry method"><h2 class="section-title">
            <span class="name">.css( propertyName )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types/#String">String</a></span>
          </h2>
            <div class="entry-wrapper">
              <p class="desc"><strong>Description: </strong>Get the computed style properties for the first element in the set of matched elements.</p>
              <ul class="signatures">
                <li class="signature">
                  <h4 class="name">
                    <span class="version-details">version added: <a href="/category/version/1.0/">1.0</a></span><a id="css-propertyName" href="#css-propertyName"><span class="icon-link"></span>.css( propertyName )</a>
                  </h4>
                  <ul><li id="css-propertyName-propertyName">
                    <div><strong>propertyName</strong></div>
                    <div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
                    </div>
                    <div>A CSS property.</div>
                  </li></ul>
                </li>
                <li class="signature">
                  <h4 class="name">
                    <span class="version-details">version added: <a href="/category/version/1.9/">1.9</a></span><a id="css-propertyNames" href="#css-propertyNames"><span class="icon-link"></span>.css( propertyNames )</a>
                  </h4>
                  <ul><li id="css-propertyNames-propertyNames">
                    <div><strong>propertyNames</strong></div>
                    <div>Type: <a href="http://api.jquery.com/Types/#Array">Array</a>
                    </div>
                    <div>An array of one or more CSS properties.</div>
                  </li></ul>
                </li>
              </ul>
              <div class="longdesc" id="entry-longdesc">
                <p>The <code>.css()</code> method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the <code>getComputedStyle()</code> method in standards-based browsers versus the <code>currentStyle</code> and <code>runtimeStyle</code> properties in Internet Explorer prior to version 9) and the different terms browsers use for certain properties. For example, Internet Explorer&apos;s DOM implementation refers to the <code>float</code> property as <code>styleFloat</code>, while W3C standards-compliant browsers refer to it as <code>cssFloat</code>. For consistency, you can simply use <code>&quot;float&quot;</code>, and jQuery will translate it to the correct value for each browser.</p>
                <p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css( &quot;background-color&quot; )</code> and <code>.css( &quot;backgroundColor&quot; )</code>. This means mixed case has a special meaning, <code>.css( &quot;WiDtH&quot; )</code> won&apos;t do the same as <code>.css( &quot;width&quot; )</code>, for example.</p>
                <p>Note that the <em>computed style</em> of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).</p>
                <p>Retrieval of shorthand CSS properties (e.g., <code>margin</code>, <code>background</code>, <code>border</code>), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered <code>border-width</code>, use: <code>$( elem ).css( &quot;borderTopWidth&quot; )</code>, <code>$( elem ).css( &quot;borderBottomWidth&quot; )</code>, and so on.</p>
                <p>An element should be connected to the DOM when calling <code>.css()</code> on it. If it isn&apos;t, jQuery may throw an error.</p>
                <p><strong>As of jQuery 1.9</strong>, passing an array of style properties to <code>.css()</code> will result in an object of property-value pairs. For example, to retrieve all four rendered <code>border-width</code> values, you could use <code>$( elem ).css([ &quot;borderTopWidth&quot;, &quot;borderRightWidth&quot;, &quot;borderBottomWidth&quot;, &quot;borderLeftWidth&quot; ])</code>. </p>
                <p><strong>As of jQuery 3.2</strong>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">CSS Custom Properties</a> (also called CSS Variables) are supported: <code>$( &quot;p&quot; ).css( &quot;--custom-property&quot; )</code>. Note that you need to provide the property name as-is, camelCasing it won&apos;t work as it does for regular CSS properties.</p>
              </div>
              <section class="entry-examples" id="entry-examples"><header><h2>Examples:</h2></header><div class="entry-example" id="example-0">
                <p>Get the background color of a clicked div.</p>
                <div class="syntaxhighlighter xml">
                  <table>
                    <tbody>
                    <tr>

                      <td class="gutter">

                        <div class="line n1">1</div>

                        <div class="line n2">2</div>

                        <div class="line n3">3</div>

                        <div class="line n4">4</div>

                        <div class="line n5">5</div>

                        <div class="line n6">6</div>

                        <div class="line n7">7</div>

                        <div class="line n8">8</div>

                        <div class="line n9">9</div>

                        <div class="line n10">10</div>

                        <div class="line n11">11</div>

                        <div class="line n12">12</div>

                        <div class="line n13">13</div>

                        <div class="line n14">14</div>

                        <div class="line n15">15</div>

                        <div class="line n16">16</div>

                        <div class="line n17">17</div>

                        <div class="line n18">18</div>

                        <div class="line n19">19</div>

                        <div class="line n20">20</div>

                        <div class="line n21">21</div>

                        <div class="line n22">22</div>

                        <div class="line n23">23</div>

                        <div class="line n24">24</div>

                        <div class="line n25">25</div>

                        <div class="line n26">26</div>

                        <div class="line n27">27</div>

                        <div class="line n28">28</div>

                        <div class="line n29">29</div>

                        <div class="line n30">30</div>

                        <div class="line n31">31</div>

                        <div class="line n32">32</div>

                        <div class="line n33">33</div>

                      </td>

                      <td class="code">
                        <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>css demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">div</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">width</span>: <span class="hljs-number">60px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">height</span>: <span class="hljs-number">60px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">float</span>: left;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;result&quot;</span>&gt;</span><span class="hljs-symbol">&amp;nbsp;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color:blue;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color:rgb(15,99,30);&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color:#123456;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color:#f11;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div&quot;</span> ).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">var</span> color = $( <span class="hljs-built_in">this</span> ).css( <span class="hljs-string">&quot;background-color&quot;</span> );</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-string">&quot;#result&quot;</span> ).html( <span class="hljs-string">&quot;That div is &lt;span style=&apos;color:&quot;</span> +</code></div></div><div class="container"><div class="line"><code>    color + <span class="hljs-string">&quot;;&apos;&gt;&quot;</span> + color + <span class="hljs-string">&quot;&lt;/span&gt;.&quot;</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <h4>Demo:</h4>
                <div class="demo code-demo"></div>
              </div>
                <div class="entry-example" id="example-1">
                  <p>Get the width, height, text color, and background color of a clicked div.</p>
                  <div class="syntaxhighlighter xml">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                          <div class="line n4">4</div>

                          <div class="line n5">5</div>

                          <div class="line n6">6</div>

                          <div class="line n7">7</div>

                          <div class="line n8">8</div>

                          <div class="line n9">9</div>

                          <div class="line n10">10</div>

                          <div class="line n11">11</div>

                          <div class="line n12">12</div>

                          <div class="line n13">13</div>

                          <div class="line n14">14</div>

                          <div class="line n15">15</div>

                          <div class="line n16">16</div>

                          <div class="line n17">17</div>

                          <div class="line n18">18</div>

                          <div class="line n19">19</div>

                          <div class="line n20">20</div>

                          <div class="line n21">21</div>

                          <div class="line n22">22</div>

                          <div class="line n23">23</div>

                          <div class="line n24">24</div>

                          <div class="line n25">25</div>

                          <div class="line n26">26</div>

                          <div class="line n27">27</div>

                          <div class="line n28">28</div>

                          <div class="line n29">29</div>

                          <div class="line n30">30</div>

                          <div class="line n31">31</div>

                          <div class="line n32">32</div>

                          <div class="line n33">33</div>

                          <div class="line n34">34</div>

                          <div class="line n35">35</div>

                          <div class="line n36">36</div>

                          <div class="line n37">37</div>

                          <div class="line n38">38</div>

                          <div class="line n39">39</div>

                          <div class="line n40">40</div>

                          <div class="line n41">41</div>

                          <div class="line n42">42</div>

                          <div class="line n43">43</div>

                          <div class="line n44">44</div>

                          <div class="line n45">45</div>

                          <div class="line n46">46</div>

                          <div class="line n47">47</div>

                          <div class="line n48">48</div>

                          <div class="line n49">49</div>

                          <div class="line n50">50</div>

                          <div class="line n51">51</div>

                          <div class="line n52">52</div>

                          <div class="line n53">53</div>

                          <div class="line n54">54</div>

                          <div class="line n55">55</div>

                          <div class="line n56">56</div>

                          <div class="line n57">57</div>

                          <div class="line n58">58</div>

                          <div class="line n59">59</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>css demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">div</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">float</span>: left;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-id">#box1</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">width</span>: <span class="hljs-number">50px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: yellow;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background-color</span>: blue;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-id">#box2</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">width</span>: <span class="hljs-number">80px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">255</span>, <span class="hljs-number">255</span>, <span class="hljs-number">255</span>);</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">15</span>, <span class="hljs-number">99</span>, <span class="hljs-number">30</span>);</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-id">#box3</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">width</span>: <span class="hljs-number">40px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: <span class="hljs-number">#fcc</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#123456</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-id">#box4</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">width</span>: <span class="hljs-number">70px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f11</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;result&quot;</span>&gt;</span><span class="hljs-symbol">&amp;nbsp;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box2&quot;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box3&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box4&quot;</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div&quot;</span> ).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">var</span> html = [ <span class="hljs-string">&quot;The clicked div has the following styles:&quot;</span> ];</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">var</span> styleProps = $( <span class="hljs-built_in">this</span> ).css([</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-string">&quot;width&quot;</span>, <span class="hljs-string">&quot;height&quot;</span>, <span class="hljs-string">&quot;color&quot;</span>, <span class="hljs-string">&quot;background-color&quot;</span></code></div></div><div class="container"><div class="line"><code>  ]);</code></div></div><div class="container"><div class="line"><code>  $.each( styleProps, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> prop, value </span>) </span>{</code></div></div><div class="container"><div class="line"><code>    html.push( prop + <span class="hljs-string">&quot;: &quot;</span> + value );</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-string">&quot;#result&quot;</span> ).html( html.join( <span class="hljs-string">&quot;&lt;br&gt;&quot;</span> ) );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <h4>Demo:</h4>
                  <div class="demo code-demo"></div>
                </div></section>
            </div></article><article id="css2" class="entry method"><h2 class="section-title">
            <span class="name">.css( propertyName, value )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
          </h2>
            <div class="entry-wrapper">
              <p class="desc"><strong>Description: </strong>Set one or more CSS properties for the set of matched elements.</p>
              <ul class="signatures">
                <li class="signature">
                  <h4 class="name">
                    <span class="version-details">version added: <a href="/category/version/1.0/">1.0</a></span><a id="css-propertyName-value" href="#css-propertyName-value"><span class="icon-link"></span>.css( propertyName, value )</a>
                  </h4>
                  <ul>
                    <li id="css-propertyName-value-propertyName">
                      <div><strong>propertyName</strong></div>
                      <div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
                      </div>
                      <div>A CSS property name.</div>
                    </li>
                    <li id="css-propertyName-value-value">
                      <div><strong>value</strong></div>
                      <div>Type: <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Number">Number</a>
                      </div>
                      <div>A value to set for the property.</div>
                    </li>
                  </ul>
                </li>
                <li class="signature">
                  <h4 class="name">
                    <span class="version-details">version added: <a href="/category/version/1.4/">1.4</a></span><a id="css-propertyName-function" href="#css-propertyName-function"><span class="icon-link"></span>.css( propertyName, function )</a>
                  </h4>
                  <ul>
                    <li id="css-propertyName-function-propertyName">
                      <div><strong>propertyName</strong></div>
                      <div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
                      </div>
                      <div>A CSS property name.</div>
                    </li>
                    <li id="css-propertyName-function-function">
                      <div><strong>function</strong></div>
                      <div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Integer">Integer</a> index, <a href="http://api.jquery.com/Types/#String">String</a> value )
                        =&gt;
                        <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Number">Number</a>
                      </div>
                      <div>A function returning the value to set. <code>this</code> is the current element. Receives the index position of the element in the set and the old value as arguments.</div>
                    </li>
                  </ul>
                </li>
                <li class="signature">
                  <h4 class="name">
                    <span class="version-details">version added: <a href="/category/version/1.0/">1.0</a></span><a id="css-properties" href="#css-properties"><span class="icon-link"></span>.css( properties )</a>
                  </h4>
                  <ul><li id="css-properties-properties">
                    <div><strong>properties</strong></div>
                    <div>Type: <a href="http://api.jquery.com/Types/#PlainObject">PlainObject</a>
                    </div>
                    <div>An object of property-value pairs to set.</div>
                  </li></ul>
                </li>
              </ul>
              <div class="longdesc" id="entry-longdesc-1">
                <p>As with the <code>.prop()</code> method, the <code>.css()</code> method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.</p>
                <p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css({ &quot;background-color&quot;: &quot;#ffe&quot;, &quot;border-left&quot;: &quot;5px solid #ccc&quot; })</code> and <code>.css({backgroundColor: &quot;#ffe&quot;, borderLeft: &quot;5px solid #ccc&quot; })</code>. Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they&apos;re required due to the hyphen in the name.</p>
                <p>When a number is passed as the value, jQuery will convert it to a string and add <code>px</code> to the end of that string. If the property requires units other than <code>px</code>, convert the value to a string and add the appropriate units before calling the method.</p>
                <p>When using <code>.css()</code> as a setter, jQuery modifies the element&apos;s <code>style</code> property. For example,  <code>$( &quot;#mydiv&quot; ).css( &quot;color&quot;, &quot;green&quot; )</code> is equivalent to <code>document.getElementById( &quot;mydiv&quot; ).style.color = &quot;green&quot;</code>. Setting the value of a style property to an empty string &#x2014; e.g. <code>$( &quot;#mydiv&quot; ).css( &quot;color&quot;, &quot;&quot; )</code> &#x2014; removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery&apos;s <code>.css()</code> method, or through direct DOM manipulation of the <code>style</code> property. As a consequence, the element&apos;s style for that property will be restored to whatever value was applied. So, this method can be used to cancel any style modification you have previously performed. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <code>&lt;style&gt;</code> element. <strong>Warning:</strong> one notable exception is that, for IE 8 and below, removing a shorthand property such as <code>border</code> or <code>background</code> will remove that style entirely from the element, regardless of what is set in a stylesheet or <code>&lt;style&gt;</code> element.</p>
                <p><strong>Note:</strong> <code>.css()</code> doesn&apos;t support <code>!important</code> declarations. So, the statement <code>$( &quot;p&quot; ).css( &quot;color&quot;, &quot;red !important&quot; )</code> does not turn the color of all paragraphs in the page to red as of jQuery 3.6.0. Do not depend on that <em>not working</em>, though, as a future version of jQuery may add support for such declarations. It&apos;s strongly advised to use classes instead; otherwise use a jQuery plugin.</p>
                <p>As of jQuery 1.8, the <code>.css()</code> setter will automatically take care of prefixing the property name. For example, take <code>.css( &quot;user-select&quot;, &quot;none&quot; )</code> in Chrome/Safari will set it as <code>-webkit-user-select</code>, Firefox will use <code>-moz-user-select</code>, and IE10 will use <code>-ms-user-select</code>.</p>
                <p>As of jQuery 1.6, <code>.css()</code> accepts relative values similar to <code>.animate()</code>. Relative values are a string starting with <code>+=</code> or <code>-=</code> to increment or decrement the current value. For example, if an element&apos;s padding-left was 10px, <code>.css( &quot;padding-left&quot;, &quot;+=15&quot; )</code> would result in a total padding-left of 25px.</p>
                <p>As of jQuery 1.4, <code>.css()</code> allows us to pass a function as the property value:</p>
                <div class="syntaxhighlighter javascript">
                  <table>
                    <tbody>
                    <tr>

                      <td class="gutter">

                        <div class="line n1">1</div>

                        <div class="line n2">2</div>

                        <div class="line n3">3</div>

                      </td>

                      <td class="code">
                        <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div.example&quot;</span> ).css( <span class="hljs-string">&quot;width&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> index </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">return</span> index * <span class="hljs-number">50</span>;</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <p>This example sets the widths of the matched elements to incrementally larger values.</p>
                <p><strong>Note: </strong>If nothing is returned in the setter function (ie. <code>function( index, style ){} )</code>, or if <code>undefined</code> is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.</p>
                <p><strong>As of jQuery 3.2</strong>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">CSS Custom Properties</a> (also called CSS Variables) are supported: <code>$( &quot;p&quot; ).css( &quot;--custom-property&quot;, &quot;value&quot; )</code>. Note that you need to provide the property name as-is, camelCasing it won&apos;t work as it does for regular CSS properties.</p>
              </div>
              <section class="entry-examples" id="entry-examples-1"><header><h2>Examples:</h2></header><div class="entry-example" id="example-1-0">
                <p>Change the color of any paragraph to red on mouseover event.</p>
                <div class="syntaxhighlighter xml">
                  <table>
                    <tbody>
                    <tr>

                      <td class="gutter">

                        <div class="line n1">1</div>

                        <div class="line n2">2</div>

                        <div class="line n3">3</div>

                        <div class="line n4">4</div>

                        <div class="line n5">5</div>

                        <div class="line n6">6</div>

                        <div class="line n7">7</div>

                        <div class="line n8">8</div>

                        <div class="line n9">9</div>

                        <div class="line n10">10</div>

                        <div class="line n11">11</div>

                        <div class="line n12">12</div>

                        <div class="line n13">13</div>

                        <div class="line n14">14</div>

                        <div class="line n15">15</div>

                        <div class="line n16">16</div>

                        <div class="line n17">17</div>

                        <div class="line n18">18</div>

                        <div class="line n19">19</div>

                        <div class="line n20">20</div>

                        <div class="line n21">21</div>

                        <div class="line n22">22</div>

                        <div class="line n23">23</div>

                        <div class="line n24">24</div>

                        <div class="line n25">25</div>

                        <div class="line n26">26</div>

                        <div class="line n27">27</div>

                        <div class="line n28">28</div>

                      </td>

                      <td class="code">
                        <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>css demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">p</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: blue;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Just roll the mouse over me.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Or me to see a color change.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).on( <span class="hljs-string">&quot;mouseover&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-built_in">this</span> ).css( <span class="hljs-string">&quot;color&quot;</span>, <span class="hljs-string">&quot;red&quot;</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <h4>Demo:</h4>
                <div class="demo code-demo"></div>
              </div>
                <div class="entry-example" id="example-1-1">
                  <p>Increase the width of #box by 200 pixels the first time it is clicked.</p>
                  <div class="syntaxhighlighter xml">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                          <div class="line n4">4</div>

                          <div class="line n5">5</div>

                          <div class="line n6">6</div>

                          <div class="line n7">7</div>

                          <div class="line n8">8</div>

                          <div class="line n9">9</div>

                          <div class="line n10">10</div>

                          <div class="line n11">11</div>

                          <div class="line n12">12</div>

                          <div class="line n13">13</div>

                          <div class="line n14">14</div>

                          <div class="line n15">15</div>

                          <div class="line n16">16</div>

                          <div class="line n17">17</div>

                          <div class="line n18">18</div>

                          <div class="line n19">19</div>

                          <div class="line n20">20</div>

                          <div class="line n21">21</div>

                          <div class="line n22">22</div>

                          <div class="line n23">23</div>

                          <div class="line n24">24</div>

                          <div class="line n25">25</div>

                          <div class="line n26">26</div>

                          <div class="line n27">27</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>css demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-id">#box</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background</span>: black;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: snow;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span>Click me to grow<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#box&quot;</span> ).one( <span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-built_in">this</span> ).css( <span class="hljs-string">&quot;width&quot;</span>, <span class="hljs-string">&quot;+=200&quot;</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <h4>Demo:</h4>
                  <div class="demo code-demo"></div>
                </div>
                <div class="entry-example" id="example-1-2">
                  <p>Highlight a clicked word in the paragraph.</p>
                  <div class="syntaxhighlighter xml">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                          <div class="line n4">4</div>

                          <div class="line n5">5</div>

                          <div class="line n6">6</div>

                          <div class="line n7">7</div>

                          <div class="line n8">8</div>

                          <div class="line n9">9</div>

                          <div class="line n10">10</div>

                          <div class="line n11">11</div>

                          <div class="line n12">12</div>

                          <div class="line n13">13</div>

                          <div class="line n14">14</div>

                          <div class="line n15">15</div>

                          <div class="line n16">16</div>

                          <div class="line n17">17</div>

                          <div class="line n18">18</div>

                          <div class="line n19">19</div>

                          <div class="line n20">20</div>

                          <div class="line n21">21</div>

                          <div class="line n22">22</div>

                          <div class="line n23">23</div>

                          <div class="line n24">24</div>

                          <div class="line n25">25</div>

                          <div class="line n26">26</div>

                          <div class="line n27">27</div>

                          <div class="line n28">28</div>

                          <div class="line n29">29</div>

                          <div class="line n30">30</div>

                          <div class="line n31">31</div>

                          <div class="line n32">32</div>

                          <div class="line n33">33</div>

                          <div class="line n34">34</div>

                          <div class="line n35">35</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>css demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">p</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: blue;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">font-weight</span>: bold;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">cursor</span>: pointer;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  Once upon a time there was a man</code></div></div><div class="container"><div class="line"><code>  who lived in a pizza parlor. This</code></div></div><div class="container"><div class="line"><code>  man just loved pizza and ate it all</code></div></div><div class="container"><div class="line"><code>  the time.  He went on to be the</code></div></div><div class="container"><div class="line"><code>  happiest man in the world.  The end.</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="hljs-keyword">var</span> words = $( <span class="hljs-string">&quot;p&quot;</span> ).first().text().split( <span class="hljs-regexp">/\s+/</span> );</code></div></div><div class="container"><div class="line"><code><span class="hljs-keyword">var</span> text = words.join( <span class="hljs-string">&quot;&lt;/span&gt; &lt;span&gt;&quot;</span> );</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).first().html( <span class="hljs-string">&quot;&lt;span&gt;&quot;</span> + text + <span class="hljs-string">&quot;&lt;/span&gt;&quot;</span> );</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;span&quot;</span> ).on( <span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-built_in">this</span> ).css( <span class="hljs-string">&quot;background-color&quot;</span>, <span class="hljs-string">&quot;yellow&quot;</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <h4>Demo:</h4>
                  <div class="demo code-demo"></div>
                </div>
                <div class="entry-example" id="example-1-3">
                  <p>Change the font weight and background color on mouseenter and mouseleave.</p>
                  <div class="syntaxhighlighter xml">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                          <div class="line n4">4</div>

                          <div class="line n5">5</div>

                          <div class="line n6">6</div>

                          <div class="line n7">7</div>

                          <div class="line n8">8</div>

                          <div class="line n9">9</div>

                          <div class="line n10">10</div>

                          <div class="line n11">11</div>

                          <div class="line n12">12</div>

                          <div class="line n13">13</div>

                          <div class="line n14">14</div>

                          <div class="line n15">15</div>

                          <div class="line n16">16</div>

                          <div class="line n17">17</div>

                          <div class="line n18">18</div>

                          <div class="line n19">19</div>

                          <div class="line n20">20</div>

                          <div class="line n21">21</div>

                          <div class="line n22">22</div>

                          <div class="line n23">23</div>

                          <div class="line n24">24</div>

                          <div class="line n25">25</div>

                          <div class="line n26">26</div>

                          <div class="line n27">27</div>

                          <div class="line n28">28</div>

                          <div class="line n29">29</div>

                          <div class="line n30">30</div>

                          <div class="line n31">31</div>

                          <div class="line n32">32</div>

                          <div class="line n33">33</div>

                          <div class="line n34">34</div>

                          <div class="line n35">35</div>

                          <div class="line n36">36</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>css demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">p</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: green;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Move the mouse over a paragraph.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Like this one or the one above.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> )</code></div></div><div class="container"><div class="line"><code>  .on( <span class="hljs-string">&quot;mouseenter&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>    $( <span class="hljs-built_in">this</span> ).css({</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-string">&quot;background-color&quot;</span>: <span class="hljs-string">&quot;yellow&quot;</span>,</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-string">&quot;font-weight&quot;</span>: <span class="hljs-string">&quot;bolder&quot;</span></code></div></div><div class="container"><div class="line"><code>    });</code></div></div><div class="container"><div class="line"><code>  })</code></div></div><div class="container"><div class="line"><code>  .on( <span class="hljs-string">&quot;mouseleave&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-keyword">var</span> styles = {</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-attr">backgroundColor</span> : <span class="hljs-string">&quot;#ddd&quot;</span>,</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-attr">fontWeight</span>: <span class="hljs-string">&quot;&quot;</span></code></div></div><div class="container"><div class="line"><code>    };</code></div></div><div class="container"><div class="line"><code>    $( <span class="hljs-built_in">this</span> ).css( styles );</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <h4>Demo:</h4>
                  <div class="demo code-demo"></div>
                </div>
                <div class="entry-example" id="example-1-4">
                  <p>Increase the size of a div when you click it.</p>
                  <div class="syntaxhighlighter xml">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                          <div class="line n4">4</div>

                          <div class="line n5">5</div>

                          <div class="line n6">6</div>

                          <div class="line n7">7</div>

                          <div class="line n8">8</div>

                          <div class="line n9">9</div>

                          <div class="line n10">10</div>

                          <div class="line n11">11</div>

                          <div class="line n12">12</div>

                          <div class="line n13">13</div>

                          <div class="line n14">14</div>

                          <div class="line n15">15</div>

                          <div class="line n16">16</div>

                          <div class="line n17">17</div>

                          <div class="line n18">18</div>

                          <div class="line n19">19</div>

                          <div class="line n20">20</div>

                          <div class="line n21">21</div>

                          <div class="line n22">22</div>

                          <div class="line n23">23</div>

                          <div class="line n24">24</div>

                          <div class="line n25">25</div>

                          <div class="line n26">26</div>

                          <div class="line n27">27</div>

                          <div class="line n28">28</div>

                          <div class="line n29">29</div>

                          <div class="line n30">30</div>

                          <div class="line n31">31</div>

                          <div class="line n32">32</div>

                          <div class="line n33">33</div>

                          <div class="line n34">34</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>css demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">div</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">width</span>: <span class="hljs-number">20px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">height</span>: <span class="hljs-number">15px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f33</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>click<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>click<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div&quot;</span> ).on( <span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-built_in">this</span> ).css({</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attr">width</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> index, value </span>) </span>{</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>( value ) * <span class="hljs-number">1.2</span>;</code></div></div><div class="container"><div class="line"><code>    },</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attr">height</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> index, value </span>) </span>{</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>( value ) * <span class="hljs-number">1.2</span>;</code></div></div><div class="container"><div class="line"><code>    }</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <h4>Demo:</h4>
                  <div class="demo code-demo"></div>
                </div></section>
            </div></article>	</div><!-- .entry-content -->

        </article><!-- #post-109 -->
      </div>

      <div id="sidebar" class="widget-area" role="complementary">
        <aside id="categories" class="widget">
          <ul>
            <li class="cat-item cat-item-1"><a href="//api.jquery.com/category/ajax/" >Ajax</a>
              <ul class='children'>
                <li class="cat-item cat-item-2"><a href="//api.jquery.com/category/ajax/global-ajax-event-handlers/" >Global Ajax Event Handlers</a>
                </li>
                <li class="cat-item cat-item-3"><a href="//api.jquery.com/category/ajax/helper-functions/" >Helper Functions</a>
                </li>
                <li class="cat-item cat-item-4"><a href="//api.jquery.com/category/ajax/low-level-interface/" >Low-Level Interface</a>
                </li>
                <li class="cat-item cat-item-5"><a href="//api.jquery.com/category/ajax/shorthand-methods/" >Shorthand Methods</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-6"><a href="//api.jquery.com/category/attributes/" >Attributes</a>
            </li>
            <li class="cat-item cat-item-7"><a href="//api.jquery.com/category/callbacks-object/" >Callbacks Object</a>
            </li>
            <li class="cat-item cat-item-8"><a href="//api.jquery.com/category/core/" >Core</a>
            </li>
            <li class="cat-item cat-item-9 current-cat"><a href="//api.jquery.com/category/css/" >CSS</a>
            </li>
            <li class="cat-item cat-item-10"><a href="//api.jquery.com/category/data/" >Data</a>
            </li>
            <li class="cat-item cat-item-11"><a href="//api.jquery.com/category/deferred-object/" >Deferred Object</a>
            </li>
            <li class="cat-item cat-item-87"><a href="//api.jquery.com/category/deprecated/" >Deprecated</a>
              <ul class='children'>
                <li class="cat-item cat-item-90"><a href="//api.jquery.com/category/deprecated/deprecated-1.3/" >Deprecated 1.3</a>
                </li>
                <li class="cat-item cat-item-88"><a href="//api.jquery.com/category/deprecated/deprecated-1.7/" >Deprecated 1.7</a>
                </li>
                <li class="cat-item cat-item-89"><a href="//api.jquery.com/category/deprecated/deprecated-1.8/" >Deprecated 1.8</a>
                </li>
                <li class="cat-item cat-item-94"><a href="//api.jquery.com/category/deprecated/deprecated-1.9/" >Deprecated 1.9</a>
                </li>
                <li class="cat-item cat-item-93"><a href="//api.jquery.com/category/deprecated/deprecated-1.10/" >Deprecated 1.10</a>
                </li>
                <li class="cat-item cat-item-98"><a href="//api.jquery.com/category/deprecated/deprecated-3.0/" >Deprecated 3.0</a>
                </li>
                <li class="cat-item cat-item-101"><a href="//api.jquery.com/category/deprecated/deprecated-3.2/" >Deprecated 3.2</a>
                </li>
                <li class="cat-item cat-item-99"><a href="//api.jquery.com/category/deprecated/deprecated-3.3/" >Deprecated 3.3</a>
                </li>
                <li class="cat-item cat-item-100"><a href="//api.jquery.com/category/deprecated/deprecated-3.4/" >Deprecated 3.4</a>
                </li>
                <li class="cat-item cat-item-102"><a href="//api.jquery.com/category/deprecated/deprecated-3.5/" >Deprecated 3.5</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-12"><a href="//api.jquery.com/category/dimensions/" >Dimensions</a>
            </li>
            <li class="cat-item cat-item-13"><a href="//api.jquery.com/category/effects/" >Effects</a>
              <ul class='children'>
                <li class="cat-item cat-item-14"><a href="//api.jquery.com/category/effects/basics/" >Basics</a>
                </li>
                <li class="cat-item cat-item-15"><a href="//api.jquery.com/category/effects/custom-effects/" >Custom</a>
                </li>
                <li class="cat-item cat-item-16"><a href="//api.jquery.com/category/effects/fading/" >Fading</a>
                </li>
                <li class="cat-item cat-item-17"><a href="//api.jquery.com/category/effects/sliding/" >Sliding</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-18"><a href="//api.jquery.com/category/events/" >Events</a>
              <ul class='children'>
                <li class="cat-item cat-item-19"><a href="//api.jquery.com/category/events/browser-events/" >Browser Events</a>
                </li>
                <li class="cat-item cat-item-20"><a href="//api.jquery.com/category/events/document-loading/" >Document Loading</a>
                </li>
                <li class="cat-item cat-item-21"><a href="//api.jquery.com/category/events/event-handler-attachment/" >Event Handler Attachment</a>
                </li>
                <li class="cat-item cat-item-22"><a href="//api.jquery.com/category/events/event-object/" >Event Object</a>
                </li>
                <li class="cat-item cat-item-23"><a href="//api.jquery.com/category/events/form-events/" >Form Events</a>
                </li>
                <li class="cat-item cat-item-24"><a href="//api.jquery.com/category/events/keyboard-events/" >Keyboard Events</a>
                </li>
                <li class="cat-item cat-item-25"><a href="//api.jquery.com/category/events/mouse-events/" >Mouse Events</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-26"><a href="//api.jquery.com/category/forms/" >Forms</a>
            </li>
            <li class="cat-item cat-item-27"><a href="//api.jquery.com/category/internals/" >Internals</a>
            </li>
            <li class="cat-item cat-item-28"><a href="//api.jquery.com/category/manipulation/" >Manipulation</a>
              <ul class='children'>
                <li class="cat-item cat-item-29"><a href="//api.jquery.com/category/manipulation/class-attribute/" >Class Attribute</a>
                </li>
                <li class="cat-item cat-item-30"><a href="//api.jquery.com/category/manipulation/copying/" >Copying</a>
                </li>
                <li class="cat-item cat-item-32"><a href="//api.jquery.com/category/manipulation/dom-insertion-around/" >DOM Insertion, Around</a>
                </li>
                <li class="cat-item cat-item-33"><a href="//api.jquery.com/category/manipulation/dom-insertion-inside/" >DOM Insertion, Inside</a>
                </li>
                <li class="cat-item cat-item-34"><a href="//api.jquery.com/category/manipulation/dom-insertion-outside/" >DOM Insertion, Outside</a>
                </li>
                <li class="cat-item cat-item-35"><a href="//api.jquery.com/category/manipulation/dom-removal/" >DOM Removal</a>
                </li>
                <li class="cat-item cat-item-36"><a href="//api.jquery.com/category/manipulation/dom-replacement/" >DOM Replacement</a>
                </li>
                <li class="cat-item cat-item-37"><a href="//api.jquery.com/category/manipulation/general-attributes/" >General Attributes</a>
                </li>
                <li class="cat-item cat-item-38"><a href="//api.jquery.com/category/manipulation/style-properties/" >Style Properties</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-39"><a href="//api.jquery.com/category/miscellaneous/" >Miscellaneous</a>
              <ul class='children'>
                <li class="cat-item cat-item-40"><a href="//api.jquery.com/category/miscellaneous/collection-manipulation/" >Collection Manipulation</a>
                </li>
                <li class="cat-item cat-item-41"><a href="//api.jquery.com/category/miscellaneous/data-storage/" >Data Storage</a>
                </li>
                <li class="cat-item cat-item-42"><a href="//api.jquery.com/category/miscellaneous/dom-element-methods/" >DOM Element Methods</a>
                </li>
                <li class="cat-item cat-item-43"><a href="//api.jquery.com/category/miscellaneous/setup-methods/" >Setup Methods</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-44"><a href="//api.jquery.com/category/offset/" >Offset</a>
            </li>
            <li class="cat-item cat-item-45"><a href="//api.jquery.com/category/properties/" >Properties</a>
              <ul class='children'>
                <li class="cat-item cat-item-46"><a href="//api.jquery.com/category/properties/jquery-object-instance-properties/" >Properties of jQuery Object Instances</a>
                </li>
                <li class="cat-item cat-item-47"><a href="//api.jquery.com/category/properties/global-jquery-object-properties/" >Properties of the Global jQuery Object</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-92"><a href="//api.jquery.com/category/removed/" >Removed</a>
            </li>
            <li class="cat-item cat-item-48"><a href="//api.jquery.com/category/selectors/" >Selectors</a>
              <ul class='children'>
                <li class="cat-item cat-item-49"><a href="//api.jquery.com/category/selectors/attribute-selectors/" >Attribute</a>
                </li>
                <li class="cat-item cat-item-50"><a href="//api.jquery.com/category/selectors/basic-css-selectors/" >Basic</a>
                </li>
                <li class="cat-item cat-item-51"><a href="//api.jquery.com/category/selectors/basic-filter-selectors/" >Basic Filter</a>
                </li>
                <li class="cat-item cat-item-52"><a href="//api.jquery.com/category/selectors/child-filter-selectors/" >Child Filter</a>
                </li>
                <li class="cat-item cat-item-53"><a href="//api.jquery.com/category/selectors/content-filter-selector/" >Content Filter</a>
                </li>
                <li class="cat-item cat-item-54"><a href="//api.jquery.com/category/selectors/form-selectors/" >Form</a>
                </li>
                <li class="cat-item cat-item-55"><a href="//api.jquery.com/category/selectors/hierarchy-selectors/" >Hierarchy</a>
                </li>
                <li class="cat-item cat-item-56"><a href="//api.jquery.com/category/selectors/jquery-selector-extensions/" >jQuery Extensions</a>
                </li>
                <li class="cat-item cat-item-57"><a href="//api.jquery.com/category/selectors/visibility-filter-selectors/" >Visibility Filter</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-58"><a href="//api.jquery.com/category/traversing/" >Traversing</a>
              <ul class='children'>
                <li class="cat-item cat-item-59"><a href="//api.jquery.com/category/traversing/filtering/" >Filtering</a>
                </li>
                <li class="cat-item cat-item-60"><a href="//api.jquery.com/category/traversing/miscellaneous-traversal/" >Miscellaneous Traversing</a>
                </li>
                <li class="cat-item cat-item-61"><a href="//api.jquery.com/category/traversing/tree-traversal/" >Tree Traversal</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-63"><a href="//api.jquery.com/category/utilities/" >Utilities</a>
            </li>
            <li class="cat-item cat-item-64"><a href="//api.jquery.com/category/version/" >Version</a>
              <ul class='children'>
                <li class="cat-item cat-item-65"><a href="//api.jquery.com/category/version/1.0/" >Version 1.0</a>
                </li>
                <li class="cat-item cat-item-66"><a href="//api.jquery.com/category/version/1.0.4/" >Version 1.0.4</a>
                </li>
                <li class="cat-item cat-item-67"><a href="//api.jquery.com/category/version/1.1/" >Version 1.1</a>
                </li>
                <li class="cat-item cat-item-68"><a href="//api.jquery.com/category/version/1.1.2/" >Version 1.1.2</a>
                </li>
                <li class="cat-item cat-item-69"><a href="//api.jquery.com/category/version/1.1.3/" >Version 1.1.3</a>
                </li>
                <li class="cat-item cat-item-70"><a href="//api.jquery.com/category/version/1.1.4/" >Version 1.1.4</a>
                </li>
                <li class="cat-item cat-item-71"><a href="//api.jquery.com/category/version/1.2/" >Version 1.2</a>
                </li>
                <li class="cat-item cat-item-72"><a href="//api.jquery.com/category/version/1.2.3/" >Version 1.2.3</a>
                </li>
                <li class="cat-item cat-item-73"><a href="//api.jquery.com/category/version/1.2.6/" >Version 1.2.6</a>
                </li>
                <li class="cat-item cat-item-74"><a href="//api.jquery.com/category/version/1.3/" >Version 1.3</a>
                </li>
                <li class="cat-item cat-item-75"><a href="//api.jquery.com/category/version/1.4/" >Version 1.4</a>
                </li>
                <li class="cat-item cat-item-76"><a href="//api.jquery.com/category/version/1.4.1/" >Version 1.4.1</a>
                </li>
                <li class="cat-item cat-item-77"><a href="//api.jquery.com/category/version/1.4.2/" >Version 1.4.2</a>
                </li>
                <li class="cat-item cat-item-78"><a href="//api.jquery.com/category/version/1.4.3/" >Version 1.4.3</a>
                </li>
                <li class="cat-item cat-item-79"><a href="//api.jquery.com/category/version/1.4.4/" >Version 1.4.4</a>
                </li>
                <li class="cat-item cat-item-80"><a href="//api.jquery.com/category/version/1.5/" >Version 1.5</a>
                </li>
                <li class="cat-item cat-item-81"><a href="//api.jquery.com/category/version/1.5.1/" >Version 1.5.1</a>
                </li>
                <li class="cat-item cat-item-82"><a href="//api.jquery.com/category/version/1.6/" >Version 1.6</a>
                </li>
                <li class="cat-item cat-item-83"><a href="//api.jquery.com/category/version/1.7/" >Version 1.7</a>
                </li>
                <li class="cat-item cat-item-84"><a href="//api.jquery.com/category/version/1.8/" >Version 1.8</a>
                </li>
                <li class="cat-item cat-item-86"><a href="//api.jquery.com/category/version/1.9/" >Version 1.9</a>
                </li>
                <li class="cat-item cat-item-103"><a href="//api.jquery.com/category/version/1.12-and-2.2/" >Version 1.12 &amp; 2.2</a>
                </li>
                <li class="cat-item cat-item-95"><a href="//api.jquery.com/category/version/3.0/" >Version 3.0</a>
                </li>
                <li class="cat-item cat-item-96"><a href="//api.jquery.com/category/version/3.1/" >Version 3.1</a>
                </li>
                <li class="cat-item cat-item-104"><a href="//api.jquery.com/category/version/3.2/" >Version 3.2</a>
                </li>
                <li class="cat-item cat-item-105"><a href="//api.jquery.com/category/version/3.3/" >Version 3.3</a>
                </li>
                <li class="cat-item cat-item-106"><a href="//api.jquery.com/category/version/3.4/" >Version 3.4</a>
                </li>
                <li class="cat-item cat-item-107"><a href="//api.jquery.com/category/version/3.5/" >Version 3.5</a>
                </li>
              </ul>
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </div>
</div>

<footer class="clearfix simple">
  <div class="constrain">
    <div class="row">
      <div class="six columns offset-by-three">
        <h3><span>Books</span></h3>
        <ul class="books">
          <li>
            <a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition">
              <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92" height="114">
              Learning jQuery Fourth Edition
              <cite>Karl Swedberg and Jonathan Chaffer</cite>
            </a>
          </li>
          <li>
            <a href="https://www.manning.com/books/jquery-in-action-third-edition">
              <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg" alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="92" height="114">
              jQuery in Action
              <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
            </a>
          </li>
          <li>
            <a href="https://www.syncfusion.com/ebooks/jquery">
              <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg" alt="jQuery Succinctly by Cody Lindley" width="92" height="114">
              jQuery Succinctly
              <cite>Cody Lindley</cite>
            </a>
          </li>
        </ul>
      </div>
    </div>


    <div id="legal">
      <ul class="footer-site-links">
        <li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
        <li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
        <li><a class="icon-wrench" href="https://api.jquery.com/">API</a></li>
        <li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
        <li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
        <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
      </ul>
      <p class="copyright">
        Copyright 2021 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights reserved. See <a href="https://jquery.org/license/">jQuery License</a> for more information. The <a href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply.
        <span class="sponsor-line"><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a href="https://www.stackpath.com" class="sp-link">CDN by StackPath</a></span>
      </p>
    </div>

  </div>
</footer>

<script type='text/javascript' src='//api.jquery.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script>
<script type='text/javascript' src='//api.jquery.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script>
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"  onload="document.querySelector('input[name=\'s\']') && docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
		indexName: 'jquery',
		inputSelector: 'input[name=\'s\']',
		debug: true // Set debug to true if you want to inspect the dropdown
	})" async></script>
</body>
</html>
